Lateral Esquerda

Lateral Direita

O leioute quanto mais simples mais elegante.

Portanto uma página sem divisões seria o leioute mais elegante mas também a mais chata e formal.

Este leioute apesar de simples tem uma elegância muito boa.

Note que a lateral esquerda é a menor mas basta mexer em 2 parametros width das laterais e podemos fazer essas divisões ficarem como desejarmos.

Esta página foi construída com apenas com DIVS e se você não sabe que é position fixed e relative veja neste site.

Veja um exemplo deste leioute bem acabado : Site com Pagina Lateral Esquerda e Lateral Direita

Veja o código:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Layout Padrão 1 - Lateral Direita e Lateral Esquerda</title>

    <style>
        html {
            height: 100%
        }

        body {
            font-family: Arial;
            margin: 0; /*retirar o padding do body*/
            height: 100%; /*ocupar a página inteira*/
        }

        h1, h2, h3, h4, h5, h6 { /*por default o h1 a h6 tem padding-retirando*/
            margin-top: 0;
            margin-bottom: 0px
        }

        .pagina {
            position: relative;
            height: 100%
        }

        .latEsq {
            position: absolute; /*fixed*/
            width: 20%; /*largura da lateral esquerda*/
            height: 100%;
            overflow: auto
        }

        .latDir {
            height: 100%;
            margin-left: 20%; /*espaço para exibir a lateral esquerda*/
            position: relative;
        }
    </style>

</head>

<body>
    <div class="pagina">
        <header class="latEsq" style="background-color:lightblue">
            <h1 class="site-title">Lateral Esquerda</h1>
        </header>

        <div class="latDir" style="background-color:lightgreen">
            <h1>Lateral Direita</h1>

            <p>
                O leioute quanto mais simples mais elegante. <br /><br />
                Portanto uma página sem divisões seria o leioute mais elegante mas também a mais chata e formal.<br /><br />
                Este leioute apesar de simples tem uma elegância muito boa.<br /><br />
                Note que a lateral esquerda é a menor mas basta mexer em 2 parametros width das laterais e podemos
                fazer essas divisões ficarem como desejarmos.<br /><br />
                Esta página foi construída com apenas com DIVS e se você não sabe que é position fixed e relative veja neste site.<br /><br />
                Veja um exemplo deste leioute bem acabado : <a href="http://www.ideapedia.com.br/portfolio/index.html">Site com Pagina Lateral Esquerda e Lateral Direita</a>
            </p>
        </div>
</body>
</html>